<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <%@include file="../../common.jsp"%>

    <style>
        .layui-input{
            background: #c1b9ae;
        }
        .layui-textarea{
            background: #c1b9ae;
        }
    </style>

</head>
<body style="background: #e0dbd6">
<div class="layui-form layuimini-form">

    <%--    存储图片路径--%>
    <input type="hidden" name="photo1" value="${data.photo1}" id="p1">
    <input type="hidden" name="photo2" value="${data.photo2}" id="p2">
    <input type="hidden" name="photo3" value="${data.photo3}" id="p3">
    <input type="hidden" name="photo4" value="${data.photo4}" id="p4">

    <div class="layui-form-item" style="position:relative; left: 5%">

        <label class="layui-form-label">
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <%--预览的图片--%>
                    <img class="layui-upload-img" id="demo1" style="height: 130px; width:106px;" src="${data.photo1}">
                </div>
                <button type="button" class="layui-btn" id="uploadPhoto1">上传图片一</button>
            </div>
        </label>
        <label class="layui-form-label ">
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <%--预览的图片--%>
                    <img class="layui-upload-img" id="demo2" style="height: 130px; width:106px;" src="${data.photo2}">
                </div>
                <button type="button" class="layui-btn" id="uploadPhoto2">上传图片二</button>
            </div>
        </label>
        <label class="layui-form-label ">
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <%--预览的图片--%>
                    <img class="layui-upload-img" id="demo3" style="height: 130px; width:106px;" src="${data.photo3}">
                </div>
                <button type="button" class="layui-btn" id="uploadPhoto3">上传图片三</button>
            </div>
        </label>
        <label class="layui-form-label ">
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <%--预览的图片--%>
                    <img class="layui-upload-img" id="demo4" style="height: 130px; width:106px;" src="${data.photo4}">
                </div>
                <button type="button" class="layui-btn" id="uploadPhoto4">上传图片四</button>
            </div>
        </label>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">宠物编号</label>
        <div class="layui-input-block">
            <input type="text" name="id" disabled="disabled"  value="${data.id}" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">宠物名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" lay-reqtext="宠物名不能为空" placeholder="请输入宠物名" value="${data.name}" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">宠物年龄</label>
        <div class="layui-input-block">
            <input type="number" name="age" lay-verify="required" lay-reqtext="宠物年龄不能为空" placeholder="请输入宠物年龄" value="${data.age}" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">宠物性别</label>
        <div class="layui-input-block">
            <select name="sex">
                <c:choose>
                    <c:when test="${data.sex == 1}">
                        <option value="1" selected>公</option>
                        <option value="2">母</option>
                    </c:when>
                    <c:otherwise>
                        <option value="1" >公</option>
                        <option value="2" selected>母</option>
                    </c:otherwise>
                </c:choose>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">已被认领</label>
        <div class="layui-input-block">
            <select name="isAdop" lay-filter="adop">
                <c:choose>
                    <c:when test="${data.isAdop == 0}">
                        <option value="0" selected>否</option>
                        <option value="1">是</option>
                    </c:when>
                    <c:otherwise>
                        <option value="0" >否</option>
                        <option value="1" selected>是</option>
                    </c:otherwise>
                </c:choose>
            </select>
        </div>
    </div>



    <div class="layui-form-item" id="adopter">
        <label class="layui-form-label">认领者ID</label>
        <div class="layui-input-block">
            <input id="adopterID" type="text" name="adopter" placeholder="请输入认领者Id" value="${data.adopter}" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <textarea name="tip" class="layui-textarea" placeholder="请输入备注信息">${data.tip}</textarea>
        </div>
    </div>

<%--    <div class="layui-form-item">--%>
<%--        <label class="layui-form-label required">物品类型</label>--%>
<%--        <div class="layui-input-block">--%>
<%--            <select name="typeId">--%>
<%--                <c:forEach items="${data}" var="goodsType">--%>
<%--                    <option value="${goodsType.id}">${goodsType.typeName}</option>--%>
<%--                </c:forEach>--%>
<%--            </select>--%>
<%--        </div>--%>
<%--    </div>--%>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>

<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        if (${data.isAdop}==0){
            $('#adopter').hide();
        }else {
            $('#adopter').show();
        }

        // 选择框提交监听
        $(document).ready(function() {
            // select下拉框选中触发事件
        form.on("select(adop)", function(e){
            if (e.value=='0'){
                $('#adopter').hide();
                $('#adopter').setAttribute("value","");

            }else {
                $('#adopter').show();
            }

            });
        });


        //监听提交
        form.on('submit(saveBtn)', function (data) {

        $.ajax({
                'url': base_url + 'cat/updateCat.do',
                'data': data.field,
                'method': 'post',
                success: function () {
                    layer.alert("修改成功",function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                        window.parent.location.reload();
                    });
                },
                error: function() {
                    layer.alert("修改异常");
                }
            });
            // alert(JSON.stringify(data.field))
            return false;
        });

    });

    layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadPhoto1'
            , url: base_url + 'cat/upload.do' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                console.log(obj)
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $("#demo1").attr('src', result); //图片预览
                });
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code < 0) {
                    return layer.msg('上传失败');
                }
                //上传成功后
                if(res.code === 1){
                    $('#p1').attr('value',res.src);
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        var uploadInst = upload.render({
            elem: '#uploadPhoto2'
            , url: base_url + 'cat/upload.do' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                console.log(obj)
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $("#demo2").attr('src', result); //图片预览
                });
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code < 0) {
                    return layer.msg('上传失败');
                }
                //上传成功后
                if(res.code === 1){
                    $('#p2').attr('value',res.src);
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        var uploadInst = upload.render({
            elem: '#uploadPhoto3'
            , url: base_url + 'cat/upload.do' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                console.log(obj)
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $("#demo3").attr('src', result); //图片预览
                });
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code < 0) {
                    return layer.msg('上传失败');
                }
                //上传成功后
                if(res.code === 1){
                    $('#p3').attr('value',res.src);
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        var uploadInst = upload.render({
            elem: '#uploadPhoto4'
            , url: base_url + 'cat/upload.do' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                console.log(obj)
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $("#demo4").attr('src', result); //图片预览
                });
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code < 0) {
                    return layer.msg('上传失败');
                }
                //上传成功后
                if(res.code === 1){
                    $('#p4').attr('value',res.src);
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


    });


</script>
</body>
</html>